﻿<Page x:Class="Microsoft.DevDiv.Wpf.Samples.DeferredMarkupExtensionSample.Page1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:po="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="clr-namespace:Microsoft.DevDiv.Wpf.Samples"
  xmlns:sys="clr-namespace:System;assembly=System"
  xmlns:ctrl="clr-namespace:Microsoft.DevDiv.Wpf.Samples.Controls;assembly=CommonControls"
  mc:Ignorable="po"
  DataContext="{Binding RelativeSource={RelativeSource Self}}">
  <Page.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="StylesAndTemplates.xaml" />
      </ResourceDictionary.MergedDictionaries>
      
      <!-- Storyboard to rotate a UIElement forever -->
      <!-- Used to show the app remains responsive even as images are decoded -->
      <Storyboard x:Key="rotateUIElement360">
        <DoubleAnimation
          Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
          From="0"
          To="360"
          Duration="00:00:01.50"
          RepeatBehavior="Forever" />
      </Storyboard>
    </ResourceDictionary>
  </Page.Resources>
  <StackPanel>
    <GroupBox Header="Description">
      <Expander IsExpanded="True">
        <TextBlock TextWrapping="Wrap">
          This sample application shows the performance difference between
          the built-in WPF Uri to ImageSource converter and
          the AsyncImageSource markup extension.<LineBreak />
          Use the Bing search API to load images from the web and compare the responsivenes of the app
          using either method.
        </TextBlock>
      </Expander>
    </GroupBox>

    <GroupBox Header="Responsivenss Animation" Padding="20">
      <Ellipse Fill="Green" Width="10" Height="10" RenderTransformOrigin="0.0, 0.0">
        <UIElement.RenderTransform>
          <RotateTransform />
        </UIElement.RenderTransform>

        <FrameworkElement.Triggers>
          <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource rotateUIElement360}" />
          </EventTrigger>
        </FrameworkElement.Triggers>
      </Ellipse>
    </GroupBox>

    <GroupBox Header="AsyncImageSource in ItemsControl">
      <UIElement.CommandBindings>
        <CommandBinding
          Command="{x:Static NavigationCommands.Search}"
          CanExecute="Handle_CanExecuteSearch"
          Executed="Handle_ExecutedSearch" />
      </UIElement.CommandBindings>

      <StackPanel>
        <Grid Grid.Row="0" Margin="3">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>
          <Button Grid.Column="1" Command="{x:Static NavigationCommands.Search}">Search</Button>

          <ctrl:CommandTextBox AcceptsReturn="true"
            x:Name="queryTextBox"
            Grid.Column="0"
            Command="{x:Static NavigationCommands.Search}">
            Enter your Bing image search keywords here
          </ctrl:CommandTextBox>
        </Grid>

        <StackPanel Margin="3">
          <TextBox x:Name="bingAppIdTextBox">
            Enter you Bing App Id here to enable Bing image searches
          </TextBox>
          <TextBlock>
            You can request a Bing App Id
            <Hyperlink NavigateUri="http://www.bing.com/developers/createapp.aspx">here</Hyperlink>
          </TextBlock>
        </StackPanel>

        <CheckBox
          x:Name="asyncImageSourceEnabledCheckbox"
          IsThreeState="false"
          IsChecked="true">
          Enable async image source
        </CheckBox>

        <Grid Grid.Row="1" Margin="3">
          <ItemsControl ItemsSource="{Binding BingErrorMessages}" />
          <ListBox
            x:Name="imageResults"
            Style="{StaticResource {x:Static ctrl:CommonStyles.ItemsControlThumbnailStyleKey}}"
            ItemsSource="{Binding BingImageSearchResults}">
          </ListBox>
        </Grid>

        <ProgressBar x:Name="progressBar" IsIndeterminate="true" Height="10" Visibility="Collapsed"/>
      </StackPanel>
    </GroupBox>
  </StackPanel>
</Page>